/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

blockquote .course_form {
    background-image: url();
    background-position: 0.3333em top;
    padding-left: 2em;
    background-repeat: no-repeat;
}

blockquote .course_form .endquote {
    background-image: url(%3D%3D);
    background-position: right bottom;
    background-repeat: no-repeat;
    position: absolute;
    display: inline-block;
    right: 6em;
    width: 4em;
    height: 1em;
}

.course-modal {
  position: fixed;
  width: 400px;
  padding: 1em;
  top: 20%;
  display: none;
  background: white;
  border-radius: 5px;
  border: 4px solid black;
}

.course-modal .close-modal {
  float: right;
  cursor: pointer;
  font-weight: bold;
}

#online_course_player {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: none;
  position: relative;
}

@media screen and (max-width: 1200px) {
  #online_course_player {
    width: 100%;
  }
}

#online_course_player iframe {
    width: 100% !important;
    height: 100% !important;
}
.course_form input {
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px dashed #000000;
    font-family: monaco, courier, monospace;
    font-size: 0.8em;
    color: #000000;
    outline: none;
    text-align: center;
}
.course_form button {
    border: none;
}

.course_form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border:0;
    border-bottom: 1px dashed #000000;
    font-family: monaco, courier, monospace;
    color: #999;
    text-align: center;
    font-size: 0.8em;
    padding-left: 2em;
    width: 10em;
}

::-webkit-input-placeholder , :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
    color:    #222;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: .1em;
    border: 0;
    border-top: .1em solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.footnote {
    font-size: 0.8em;
}
/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
    border: none;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   neo4j.org custom styles
   ========================================================================== */
@font-face {
        font-family: 'OfficinaSerifStd-Bold';
        src: url('http://assets.neo4j.org/new/font/officinaserifstd-bold.eot');
        src: url('http://assets.neo4j.org/new/font/officinaserifstd-bold.eot?#iefix') format('embedded-opentype'),
                 url('http://assets.neo4j.org/new/font/officinaserifstd-bold.woff') format('woff'),
                 url('http://assets.neo4j.org/new/font/officinaserifstd-bold.ttf') format('truetype'),
                 url('http://assets.neo4j.org/new/font/officinaserifstd-bold.svg#officinaserifstd-bold') format('svg');
        font-weight: normal;
        font-style: normal;
}

#sites {
    text-align: center;
}
#site a:active, #sites a:link, #sites a {
    color: #333333;
}
#sites a:hover {
    text-decoration: none;
    text-shadow: #BBB 0 0 .75em;
}

/** Default */
body {
    font-size: 9pt;
}

@media (max-width: 540px) {

    body {
        font-size: 11pt;
    }

    #twitter_bar div {
        width: 280px ! important;
    }

    .badge img {
        max-width: 6em ! important;
        max-height: 6em ! important;
    }

    .featured.download {
        display: none;
    }

    .featured, .introText, #linkContainer {
        max-width: 288px;
    }

    .featured .slide {
        max-width: 290px ! important;
    }

    .featured .slide .caption {
        position: relative;
    }

    .featured .slide .image {
        border: 1px solid #fff;
    }
    .featured .slide .content,
    .featured .slide .image {
        max-width: 100% ! important;
        height: auto ! important;
        /*width: 280px ! important;*/
        min-width: 0 ! important;
        float: left;
        margin: 0 ! important;
        position: relative;
    }

    .featured .slide .image:hover {
        border: 1px solid #00546a ! important;
    }

    .featured .article {
        width: 280px ! important;
    }

    .featured .article img {
        float: none ! important;
    }

    .related {
        font-size: 1.5em;
    }

    .related .item {
        max-width: 320px ! important;
        margin-right: 0 ! important;
    }

    #header, .mainpage, .related, .related .row {
        max-width: 320px ! important;
        padding: 0;
    }

    #mainNav {
        display: none;
    }

    #mobileMenu {
        width: 1em;
        display: block ! important;
    }

    #footer {
        font-size: 1.25em;
        width: 100%;
        height: 1360px ! important;
    }

    .linkBlock {
        margin-left: -13px;

    }

    .linkBlock .connect {
        margin-left: -4px;
    }

    .disclaimer {
        margin-left: -12px;
    }

}

@media (min-width: 541px) and (max-width: 780px) {

    body {
        font-size: 13pt;
    }

    .lead .col:nth-child(even) {
        display: none;
    }

    #twitter_bar div {
        width: 500px ! important;
    }

    .badge img {
        max-width: 7em ! important;
        max-height: 7em ! important;
    }

    .introText, #linkContainer {
        max-width: 500px;
    }

    .featured .slide {
        max-width: 500px ! important;
    }

    .featured.download {
        display: none;
    }

    .featured .slide .caption {
        position: relative;
    }

    .featured .slide .image {
        border: 1px solid #fff ! important;
    }

    .featured .slide .content,
    .featured .slide .image {
        min-width: 100% ! important;
        height: auto ! important;
        
        /*width: 470px ! important;*/
        /*min-width: 0 ! important;*/
        float: left;
        margin: 0 ! important;
        position: relative;
        /*border: 1px solid #fff;*/
    }

    .featured {
        width: 507px ! important;
        margin-bottom: 1em ! important;
    }

    .featured .slide .text,
    .featured .slide .text .introText,
    .featured .slide .text .content
    {
        max-width: 100% ! important;
    }

    .featured .slide .image:hover {
        border: 1px solid #00546a ! important;
    }

    .featured .article {
        width: 470px ! important;
    }

    .featured .article img {
        float: none ! important;
    }

    .related {
     /*   font-size: 1.5em;*/
    }

    .related .item {
        width: 226px ! important;
        margin: .5em 0 ! important;
    }

    .related .item:nth-child(even) {
        margin-left: 18px ! important;
        margin-right: -4px ! important;
    }

    #header, .mainpage, .related, .related .row, #sites {
        width: 540px ! important;
    }

    .related .row {
        margin: 0 ! important;
        padding-top: 0 ! important;
    }

    #mainNav {
        display: none;
    }

    #mobileMenu {
        width: 2em;
        display: block ! important;
    }

    #footer {
        width: 100%;
        height: 780px ! important;
    }

    .linkBlock {
        width: 11em ! important;
        margin-left: .25em;
    }

    .linkBlock:nth-child(odd) {
        margin-right: 4.25em;       
    }

    .linkBlock .connect {
        margin-left: -5px;
    }

    .disclaimer {
        margin-left: 2px;
    }

}

@media (min-width: 780px) and (max-width: 850px) {
    body {
        font-size: 9pt;
    }
}

@media (min-width: 850px) and (max-width: 900px) {
    body {
        font-size: 9.25pt;
    }
}

@media (min-width: 900px) and (max-width: 925px) {
    body {
        font-size: 9.5pt;
    }
}

@media (min-width: 925px) and (max-width: 950px) {
    body {
        font-size: 10pt;
    }
}

@media (min-width: 950px) and (max-width: 975px) {
    body {
        font-size: 10.52pt;
    }
}

@media (min-width: 975px) and (max-width: 1000px) {
    body {
        font-size: 10.5pt;
    }
}

@media (min-width: 1000px) and (max-width: 1025px) {
    body {
        font-size: 10.75pt;
    }
}

@media (min-width: 1025px) and (max-width: 1050px) {
    body {
        font-size: 11pt;
    }
}

@media (min-width: 1050px) and (max-width: 1100px) {
    body {
        font-size: 11.25pt;
    }
}

@media (min-width: 1100px) {
    body {
        font-size: 12pt;
    }
}

body, h1, h2, h3, h4 {
    font-family: "source-sans-pro", "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, sans-serif;
    color: #555;
    padding: 0;
    margin: 0;
}

body {
    background: #f7f7f7;
    height: 100%;
}

html {
    height: 100%;
}

h1 {
    font-size: 3em;
}

h2,.mainpage .markdown h1 {
    font-size: 2em;
}

h3,.mainpage .markdown h2 {
    font-size: 1.3em;
}

h4,.mainpage .markdown h3 {
    font-size: 1em;
}

p {
    margin-top: 0;
    line-height: 1.6em;
}

a, a:hover, a:active, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.mainElement {
    width: 100%;
}

div.clear {
    clear: both;
}

ul.menu {
    padding: 0;
    margin: 0;
}

ul.menu li {
    list-style-type: none;
    padding: 0;
    margin: 0 1em 0 0;
}

ul.hor li {
    display: inline-block;
}

.flash {
    /*padding-left: 10%;*/
    /*padding-right: 10%;*/
    padding: 0.5em;
    border: 1px solid #00546a;
    background-color: #9EBDCD;
    width: 90%;
    border-radius: .25em;
}

.btn {
    display: inline-block;
    *display: inline;
    padding: .3em 1em;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: .8em;
    line-height: 1.2em;
    *line-height: 1.2em;
    color: #333333;
    text-align: center;
    text-shadow: 0 .1em .1em rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: .1em solid #bbbbbb;
    *border: 0;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    *zoom: 1;
    -webkit-box-shadow: inset 0 .1em 0 rgba(255, 255, 255, 0.2), 0 .1em 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 .1em 0 rgba(255, 255, 255, 0.2), 0 .1em 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 .1em 0 rgba(255, 255, 255, 0.2), 0 .1em 2px rgba(0, 0, 0, 0.05);
}

.btn-install {
    color: #ffffff;
    text-shadow: 0 -.1em 0 rgba(0, 0, 0, 0.25);
    background-color: #5bb75b;
    *background-color: #51a351;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-download {
    color: #ffffff;
    text-shadow: 0 -.1em 0 rgba(0, 0, 0, 0.25);
    background-color: #00708C;
    *background-color: #00546a;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00708C), to(#00546a));
    background-image: -webkit-linear-gradient(top, #00708C, #00546a);
    background-image: -o-linear-gradient(top, #00708C, #00546a);
    background-image: linear-gradient(to bottom, #00708C, #00546a);
    background-image: -moz-linear-gradient(top, #00708C, #00546a);
    background-repeat: repeat-x;
    border-color: #00546a #00546a #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00708C', endColorstr='#00546a', GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.btn-download a:hover {
    text-shadow: #BBB 0 0 .75em;
}
.btn-action {
    color: #555 ! important;
    font-size: 1em;
    text-shadow: 0 -.1em 0 rgba(255, 255, 255, .25);
    background-color: #e5e5e5;
    *background-color: #e5e5e5;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e5e5), to(#c0c0c0));
    background-image: -webkit-linear-gradient(top, #e5e5e5, #c0c0c0);
    background-image: -o-linear-gradient(top, #e5e5e5, #c0c0c0);
    background-image: linear-gradient(to bottom, #e5e5e5, #c0c0c0);
    background-image: -moz-linear-gradient(top, #e5e5e5, #c0c0c0);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.btn-action:hover {
    color: #222 ! important;
}

#headerWrapper {
    background: #00546a; /*url('../img/header_bg.gif') repeat-x;*/
    /*border-bottom: .1em solid #c4ced0;*/
    /*position: fixed;*/
    top: 0;
    left: 0;
    z-index: 3;
}

#header {
    height: 5em;
    width: 62em;
    margin: 0 auto;
    background: transparent;
    position: relative;
}

#header .brand {
    margin: .7em 0 0 .35em;
    float: left;
    font-family: 'OfficinaSerifStd-Bold', 'Times New Roman', serif;
    font-size: 2em;
}

#header a, #header a:hover, #header a:active, #header a:visited {
    color: #fff;
    text-decoration: none;   
}

.lt-ie9 #logo {
    float: left;
    display: block;
    width: 10em;
    border-left: .3em solid transparent;
}

#logo {
    float: left;
    width: 3em;
    margin: .75em 0 0 0;
}

#mobileMenu {
    display: none;
    position: absolute;
    width: 1em;
    right: 0;
    bottom: .5em;
    margin: 1.5em 0 0 0;
    font-size: 2em;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: bold;
    color: #fff;
}

#mobileMenu.active {
    text-shadow: #fff 0 0 .75em;
}

#mobileNav {
    display: none;
    background: #e5e5e5;
    width: 100%;
    padding: 0 0 0 2.5em;
    margin: 0;
}

#mobileNav li {
    list-style-type: none;
    /*border-top: 1px solid #00546a;*/
    padding: .5em 0;
    margin: 0;
}

#mobileNav a,
#mobileNav a:visited,
#mobileNav a:active,
#mobileNav a:hover {
    font-size: 2em;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: bold;
    color: #00546a ! important;
}

#mainNav {
    position: absolute;
    right: 1em;
    bottom: .5em;
    margin: 1.5em 0 0 0;
    font-size: 1.2em;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: bold;
    color: #fff;
}

#mainNav a:hover, #mainNav .active {
    /*text-decoration: underline;*/
    /*color: #e7e7e7;*/
    text-shadow: #fff 0 0 .75em;
}

#mainNav a.btn {
    margin-top: -.2em;
    text-decoration: none;
}

#mainNav .icon-search {
    text-decoration: none;   
}

.bigsearch {
    width: 10em ! important;
}

#q {
    padding: .15em;
    width: 6em;
    font-size: .7em;
    line-height: 1.1em;
    border: 1px inset #fff;
    -webkit-border-radius: .25em;
       -moz-border-radius: .25em;
            border-radius: .25em;
}

#activePointer {
    position: absolute;
    display: none;
    bottom: -0.15em;
    font-size: 2em;
    line-height: 0.3em;
    margin-bottom: -.19em;
    color: #f7f7f7;
    z-index: 9999;
}

.mainpage a,
.mainpage a:visited,
.mainpage a:hover,
.mainpage a:active {
    color: #00546a;
}

#main {
    min-height: 10em;
    overflow: auto;
    position: relative;
    padding: 9.5em 0 0 0;
}

.welcome {
    width: 60em;
}

.course_box {
  width: 62em;
  position: relative;
  margin: 0 auto;
  padding-bottom: 1em;
}

.mainpage {
    width: 62em;
    position: relative;
    margin: 0 auto;
    border-radius: .25em;
    padding-bottom: 1em;
}

.mainpage .icon {
    margin-right: .4em;
}

.mainpage .thumbnail {
    cursor: pointer;
}

.mainpage h1 {
    color: #555;
    margin-top: .25em;
    padding-bottom: .25em ! important;
}

.mainpage .introText {
    color: #555;
    font-size: 1.5em;
    margin: 0;
}

.mainpage .content {
    /*color: #555;*/
    font-size: 1.2em;
    margin: 0;
}

.mainpage h2 {
    color: #555;
    font-size: 2.2em;
    padding-bottom: .25em;
}

.mainpage h2 a,
.mainpage h2 i {
    font-size: 2em  ;
    color: #00546a;
}

#prev {
    left: 0;
}

#next {
    right: 0;
}

.navBtn {
    z-index: 2;
    font-size: 1.5em;
    position: absolute;
    top: .5em;
    margin: 1em;
    cursor: pointer;
    display: none;
}

.navBtn:hover {
    color: #222;
    text-shadow: #aaa 0 0 1em;
}

/*
.badge {
    font-size: .9em;
    padding: 1em;
    position: absolute;
    z-index: 3;
    background: #fcf0ad;
    right: 2em;
    top: 12em;
    box-shadow: 0px 0px 1em #666;
    -webkit-box-shadow: 0px 0px 1em #666;
    -moz-box-shadow: 0px 0px 1em #666;
    -moz-transform: scale(1) rotate(10deg);
    -webkit-transform: scale(1) rotate(10deg);
    -o-transform: scale(1) rotate(10deg);
    transform: scale(1) rotate(10deg);
}

.badge .close img {
    cursor: pointer;
    width: 2em;
    height: 2em;
    position: absolute;
    z-index: 4;
    right: -.5em;
    top: -.5em;
}

.badge h3 {
    background: transparent;
}
*/

.lead {
    width: 60em;
    /*min-height: 1.7em;*/
    height: 7em;
    padding: 0;
    margin: 2em 0 1em 0;
}

.lead .introText {
    font-weight: 600;
}

.lead .col {
    width: 48%;
    height: 80%;
}

.lead .left {
    float: left;
}

.lead .right {
    float: right;
}

.lead .col:first-child {
    margin-right: 2em;
}

.lead h3 {
    padding: .5em 0;
}

.lead a,
.lead a:visited,
.lead a:hover,
.lead a:active,
.mainpage .content a,
.mainpage .content a:visited,
.mainpage .content a:hover,
.mainpage .content a:active,
.mainpage .introText a,
.mainpage .introText a:visited,
.mainpage .introText a:hover,
.mainpage .introText a:active {
    color: #00546a;
    font-weight: 600;
}

/****************** featured *******************/

.featured {
/*    position: absolute;
    top: 9em;
    left: 1em;
*/
    padding: 1em;
    margin: 1em 0;
    box-shadow: 0px 0px 1em #e5e5e5;
    -webkit-box-shadow: 0px 0px 1em #e5e5e5;
    -moz-box-shadow: 0px 0px 1em #e5e5e5;
    border: .1em solid #dce7ea;
    background: #fff;
    overflow: none; /* makes children expand this box to max height */
    width: 59em;
    height: auto;
}

.featured .slide {
    /*width: 56em;*/
    margin: .5em;
    position: relative;
    min-height: 20em;
    overflow-y: visible;
}

.image img {
    width: 100%;
}

.featured .slide .image a:hover {
    text-decoration: none;
    /*font-weight: bolder;*/
}
.featured .slide .image {
    /*min-width: 50%;*/
    float: right;
    height: auto;
    max-width: 37em;
    min-width: 25em;
    /*max-height: 25em;*/
    display: inline-block;
    margin: 1.0em;
    max-height: 100%;
    overflow: visible;
    /*height: 100% ! important;*/
    padding: 0;
    position: relative;
    z-index: 100;
}

.featured .image {
}

.featured .image img {
    border: .2em solid #fff;
}

.featured .slide .image img:hover {
    cursor: pointer;
    border: .2em solid #00546a;
    /*padding: .2em;*/
    /*margin: .2em;*/
}


.featured .introText {
    line-height: 1.4em;
}

.featured .content {
    margin-top: 1em;
    width: 38em;
    /*float: right;*/
    /*text-align: right;*/
}

.featured .article .contentText img {
    float: none;
    display: inline-block;
    margin-left: 12.5%;
}

.featured .caption {
    font-size: 1em;
    line-height: 1.5em;
    position: relative;
    top: 0;
}

.featured .caption h3 {
    line-height: 1em;
    font-size: 1.75em;
    padding: 0 0 .5em 0;
    margin: -.2em 0 0 0;
    color: #00546a;
}

.featured a,
.featured a:visited,
.featured a:hover,
.featured a:active {
    font-weight: 600;
}


.featured .console .caption {
    width: 56em;
    position: relative;
}

#console iframe {
    width: 61em;
    position: relative;
    border: .1em solid #ccc;
}

#console iframe button {

}

.featured .console #console iframe {
    margin-top: .5em;
    width: 58em;
}

.featured .console .datasets li {
    list-style-type: none;
    border: none; 
}

.featured #console .btn {
    position: absolute;
    top: 0;
    right: 1em;
}

.featured .console {
    height: 32em;
}

.featured .article {
    height: 100% ! important;
    min-height: 27em;
}

.featured .article .introText {
    font-size: 1.2em;
    color: #222;
}

.featured h2,
.featured h3,
.featured h4,
.featured h5 {
    color: #00546a;
}

.featured .version a .icon-download-alt,
.related  .version a ,
.related  .version td  {
    font-size: 0.9em;
}

.related .notes {
    position: absolute;
    bottom: .65em;
    left: 1em;
}

.related  .version td ,
.featured .version td {
    text-align: right;
}

.featured .video .caption,
.featured .version .caption,
.featured .default .caption,
.featured .page .caption,
.featured .track .caption,
.featured .page .caption
{
    width: 18em;
}

/*.featured .slide a.action  {*/
.featured a.action  {
    display: inline-block;
    position: relative;
    bottom: 0;
    left: 0.25em;
}

.featured .article .caption,
.featured .article .content,
.featured .page .caption,
.featured .page .content,
.featured .book .caption,
.featured .book .content {
    /*display: block;*/
    position: relative;
}

.featured .text {
    /*float: left;*/
}

.bxslider .featured {
    box-shadow: none ! important;
    -webkit-box-shadow: none ! important;
    -moz-box-shadow: none ! important;
    border: none ! important;
    margin-top: 0 ! important;
    padding-top: 0 ! important;
    margin-bottom: .5em ! important;
    min-height: 0 ! important;
}

/****************** tracks *******************/

.trackNav {
    font-size: 1em;
    margin-bottom: 1em;
}

.trackNav a,
.trackNav a:visited,
.trackNav a:active,
.trackNav a:hover {
    color: #00546a;
}

.nextStep {
    float: right;
    margin-right: 1em;
}

.nextStep i {
    margin-left: 1em;
}

.prevStep {
    float: left;
    margin-right: 1em;
}

.prevStep i {
    margin-right: 1em;
}

/****************** related *******************/

.related {
    /*padding-top: 1em;*/
    /*min-height: 6em;*/
    /*background-color: #fff;*/
    /*border-bottom: .1em solid #ccc;*/
}

.related a,
.related a:visited,
.related a:hover,
.related a:active {
    font-family: "source-sans-pro", "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, sans-serif;
    color: #00546a;
    font-weight: 600;
}

.related .row {
    width: 63em;
    min-height: 6em;
    margin-left: -.5em;
    /*border-top: .1em solid #dce7ea;*/
    padding-top: 1em;
}

.related .row .item {
    width: 12.4em;
    /*min-height: 6em;*/
    float: left;
    position: relative;
    padding: 1em 1em 2em 1em;
    margin: .5em;
    box-shadow: 0px 0px 1em #e5e5e5;
    -webkit-box-shadow: 0px 0px 1em #e5e5e5;
    -moz-box-shadow: 0px 0px 1em #e5e5e5;
    border: .1em solid #dce7ea;
    background: #fff;
}

.related .row .item:hover {
    box-shadow: 0px 0px 1em #e0e0e0;
    -webkit-box-shadow: 0px 0px 1em #e0e0e0;
    -moz-box-shadow: 0px 0px 1em #e0e0e0;
    border: .1em solid #cccccc;
}

.related .row .item h3 {
    padding-bottom: .5em;
}

.related .item img {
    display: block;
    margin: 0 auto .5em auto;
    border: none;
    max-width: 12em;
}

.related .row .item img.logo {
    max-width: 8em;
    max-height: 8em;
    margin: 0 0 1em 4em;
}

.related .introText {
    font-size: .9em;
    margin-bottom: 0;
}

.related .preview {
    max-width: 17em;
    max-height: 10em;
    margin: auto;
    border: .1em solid #e5e5e5;
/*    width: 10em;
    margin: 0 3em ! important;
/*    border: none;*/
    text-align: center;
}


.related .driver p {
    /*font-size: 0.83em;*/
    /*font-size: 9pt;*/
    /*height: 24em ! important;*/
    margin: .25em 0;
}

.related .driver img {
    width: 10em;
    margin: 0 1.5em ! important;
    padding: 0;
    text-align: center;
    border: none;
}

.related .driver h4 {
    padding: 0;
    margin: .25em 0;
    /*font-size: 0.8em;*/
}

.related .driver h3 {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.related .person {
    padding-bottom: 1em ! important;
}

.related .person h5 {
    text-align: center;
}

.related .video .introText,
.related .person .introText {
    font-size: .8em;
}

.related .item .link,
.related .outLink {
    position: absolute;
    bottom: .65em;
    right: 1em;
}
.related .item .github {
    position: absolute;
    bottom: .65em;
    left: 1em;
}

.related .item a:hover.like  {
    text-decoration: none;
}

.related .item .like {
    position: absolute;
    top: .25em;
    right: 0.25em;

    display: none;
}

.related .item iframe.twitter-timeline {
    min-width: 12.5em ! important;
    width: 12.5em ! important;
}

/****************** channel *******************/

#add_channel {
}

#add_channel input, #add_channel select {
   width: 12em;
   margin: .1em;
   border: 1px inset #ccc;
}

#add_channel label {
    width: 3em;
    text-align: left ! important;
}
#add_channel {
    height: 7em;
}

#add_channel table {
    font-size: .8em;
    border-collapse: collapse;
    margin-bottom: .3em;
}

#add_channel table td:first-child {
    text-align: left;
    width: 4em;
}

a.vote:hover, a.vote:visited,a.vote:active {
    display: block;
    text-decoration: none;
}
a.vote {
    display: block;
}

a.vote i {
    vertical-align: baseline;
}
.related.item.channel {
    vertical-align: middle;
    text-align: center;
    height: 7em;
}
.related.item.channel a img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 4em;
    max-width: 10em;
}

/****************** steps *******************/

.steps {
    float: left;
    width: 10em;
}

/****************** link blocks *******************/

#linkContainer {
    width: 62em;
    margin: 0 auto;
    padding: 1em 0 0 0;
}

.linkBlock li.fheader .icon {
    width: 1em;
    margin-left: -1.3em;
    margin-right: .3em;
    vertical-align: middle;
}

.linkBlock li.fheader img.icon {
    margin-top: .15em;
}

.linkBlock {
    color: #00546a;
    width: 12em;
    height: 13.5em;
    float: left;
}

.linkBlock a {
    color: #00546a;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: .8em;
    text-decoration: none;
}

.linkBlock a:hover {
    text-shadow: #a5a5a5 0 0 .15em;    
}

.linkBlock li.fheader,
.linkBlock li.fheader a {
    text-transform: uppercase;
}

.linkBlock li.fheader a:hover {
    text-shadow: #a5a5a5 0 0 .1em;  
}

.linkBlock .connect li {
    margin-bottom: .5em;
}

.linkBlock .connect a {
    font-size: 1em;
}

.linkBlock .subscribe iframe {
    margin: 0 0 0 -10px ! important;
}

/****************** footer *******************/

.wrapper {
    min-height: 100%;
    height: auto ! important;
    height: 100%;
    margin: 0 auto -16em;
    /*overflow: hidden;*/
}

.push {
    height: 16em;
}

#footer {
    background-color: #e5e5e5;
    border-top: .1em solid #c4ced0;
    height: 15.9em;
    overflow: hidden;
}

#footer .disclaimer {
    float: left;
    font-size: .8em;
    width: 100%;
}

#footer .disclaimer,
#footer .disclaimer a,
#footer .disclaimer a:hover,
#footer .disclaimer a:active,
#footer .disclaimer a:visited {
    color: #00546a;
    font-family: 'Open Sans', Helvetica, sans-serif;
    text-decoration: none;
    /*text-align: right;*/
}

#footer .disclaimer a:hover {
    text-decoration: underline;
}

#footer .disclaimer .nbr {
    white-space: nowrap;
}


/****************** Twitter bar *******************/

#twitter_bar {
    width: 100%;
    /*background: #00546a;*/
    padding: 2em 0;
}

#twitter_bar div {
    color: #333;
    width: 72em;
    text-align: center;
    margin: 0 auto;
    /*background: url('//twitter.com/images/resources/twitter-bird-16x16.png') #e5e5e5 no-repeat .5em .5em;*/
    /*background: url('/assets/new/img/twitter-bird-light-bgs-32x32.png') #fff no-repeat .25em .25em;*/
    border: .1em solid #9EBDCD;
    padding: .2em;
    border-radius: .25em;
}

#twitter_bar,
#twitter_bar a,
#twitter_bar a:visited,
#twitter_bar a:active,
#twitter_bar a:hover {
   color: #00546a;
}

#twitter_bar .text {
    /*font-size: 0.9em;*/
}

#twitter_bar img {
    margin: .5em;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: .1em;
    margin: -.1em;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: .1em;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: .1em solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.bjqs-controls li a i {
    color: white;
    text-shadow: 0 .1em .1em rgba(0, 0, 0, 0.75);
    text-decoration: none;
    font-size: 3em;
}
.bjqs-controls li.bjqs-prev a i {
    margin-left: -0.8em;
}
.bjqs-controls li.bjqs-next a i {
    margin-right: -0.8em;
}

.caption .table-download {
    width: 20em;
}

table.events {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

table.events  tbody tr:nth-child(odd) {
   background-color: #ccc;
}
table.events th, table.events tbody td {
   padding: 0.2em;
}

table.events th {
    /*text-align: left;*/
}
table.events th.event_title, table.events tbody td.event_title {
    width: 30%;
}
table.events th.event_location, table.events tbody td.event_location {
    width: 30%;
}
table.events th.event_date, table.events tbody td.event_date {
    width: 30%;
}
table.events th.event_presenter, table.events tbody td.event_presenter {
   display: none;
}

.table-download th, .table-download td {
  text-align: left;
  vertical-align: middle;
  height: 2em;;
}
table th {
    font-size: larger;
}
.table-download tbody tr:nth-child(odd) td {
  width: 40%;  
  border-color: #ccc;
  background-color: #F9F9F9;
}
#play-button {
    height: 20px;
    padding: 2px;
    font-size: 16px;
    position: absolute;
}

pre,
code {
    page-break-inside: avoid;
    color: #00546A;
    padding: 0 .2em .1em;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: .8em;
    -webkit-border-radius: .1em;
       -moz-border-radius: .1em;
            border-radius: .1em;
    background-color: #f5f5f5;
    white-space: pre;
}

pre {
  border: .1em solid #999;
  display: block;
  max-width: 65em;
  padding: .5em;
  margin: 0 0 .7em;
  /*line-height: 20px;*/
  word-break: break-all;
  word-wrap: break-word;
  /*white-space: pre-wrap;*/
}

a code,
a:visited code,
a:active code,
a:hover code,
a pre,
a:visited pre,
a:active pre,
a:hover pre {
    font-weight: bold ! important;
}

#release_notes a,
#release_notes a:visited,
#release_notes a:active,
#release_notes a:hover {
    font-weight: 600 ! important;
}

text.caption a:hover {
    cursor: pointer;
}


/* Regular */
@font-face {
  font-family: 'Open Sans';
  src: url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Regular-webfont.eot);
  src: url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Regular-webfont.eot?iefix) format("eot"), 
    url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Regular-webfont.ttf) format("truetype"), 
    url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Regular-webfont.svg) format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Light */
@font-face {
  font-family: 'Open Sans';
  src: url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Light-webfont.eot);
  src: url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Light-webfont.eot?iefix) format("eot"), 
    url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Light-webfont.ttf) format("truetype"), 
    url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/fonts/OpenSans/OpenSans-Light-webfont.svg) format("svg");
  font-weight: 200;
  font-style: normal;
}


#banner {
  z-index: 999;
  position: fixed;
  padding: 0px;
  margin: 0px;
  background: url('http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/pattern.png'), #00497a;
  background: url('http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/pattern.png'), -moz-linear-gradient(top, #00497a 0%, #237ab0 100%);
  background: url('http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/pattern.png'), -webkit-gradient(left top, left bottom, color-stop(0%, #00497a), color-stop(100%, #237ab0));
  background: url('http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/pattern.png'), -webkit-linear-gradient(top, #00497a 0%, #237ab0 100%);
  background: url('http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/pattern.png'), -o-linear-gradient(top, #00497a 0%, #237ab0 100%);
  background: url('http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/pattern.png'), -ms-linear-gradient(top, #00497a 0%, #237ab0 100%);
  background: url('http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/pattern.png'), linear-gradient(to bottom, #00497a 0%, #237ab0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00497a', endColorstr='#237ab0', GradientType=0 );

  color: #FFF;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-weight: 300;
}

#banner div {
  margin-left: auto;
  margin-right: auto;
}

#banner h1, #banner h2, #banner p, #banner a {
  text-align: center;
  color: #FFF;
  font-weight: 300;
}

#banner h1 {
  font-size: 2rem;
}

#banner h2 {
  font-size: 1.25rem;
  font-weight: 300;
}

#banner a {
  text-decoration: none;
  color: #FFF;
  width: 100%;
}
#banner a:hover {
  background-color: rgba(255, 255, 255, 0.2)
}

#banner .row {
  margin: 0px;
  padding: 0px;
}

#banner .footer {
  position: absolute;
  margin-left: 1em;
  margin-right: 1em;
}

/* Define mobile styles */
@media only screen {
  #banner {
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    width: 48px;
    height: 48px;

    display: none;
  }

  #banner h2 {
    display: none;
  }

  #banner #com-logo {
    margin: 0;
    margin-top: 1em;
    display: block;
    width: 40px;
    height: 40px;
    background-size: 180px 60px;
    background-image: url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/logo-neo4j.svg);
    background-repeat: no-repeat;
  }

  #banner #blog-link {
    display: none;
  }
} /* mobile styles */

/* Medium screens*/
@media only screen and (min-width: 40.063em) { 
  #banner {
    top: 40%;
    left: 0px;
    width: 50px;
    height: 260px;
    display: block;
    /*border: 1px solid red;*/
  }

  #banner #com-logo {
    width: 40px;
    height: 40px;
    background-image: url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/logo-neo4j.svg);
    background-repeat: no-repeat;
    background-size: 90px 40px;
    background-position: 5px 0px;
  }

  #banner #com-link h1 {
    margin-top: 120px;

    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  }
} /* min-width 641px, medium screens */

/* Large screens*/
@media only screen and (min-width: 64.063em) {

} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens*/
@media only screen and (min-width: 90.063em) {
  #banner {
    top: 102px;
    left: 12px;
    width: 200px;
    height: 500px;

  }

  #banner #com-logo {
    width: 180px;
    height: 90px;
    background-image: url(http://neo4j.com/wp-content/themes/neo4jzurb/assets/images/logo-neo4j.svg);
    background-repeat: no-repeat;
    background-size: 180px 90px;
    background-position: 0px 0px;

  }


  #banner #com-link h1 {
    margin-top: 0px;

    position: static;

    -webkit-transform: rotate(0deg);

    /* Firefox */
    -moz-transform: rotate(0deg);

    /* IE */
    -ms-transform: rotate(0deg);

    /* Opera */
    -o-transform: rotate(0deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);

  }

  #banner #blog-link {
    display: inline;
  }


  #banner h2 {
    display: block;
  }

  #banner div {
    width: 180px;
  }

  #banner .footer {
    margin-left: 1em;
    margin-right: 1em;
    bottom: 20px;
  }
} /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens*/
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */
